<script setup>
import {ref} from "vue";
import jumpHelper from "@/js/pageJumper";


const logoText = ref({
  head:'星火相传',
  txt:'一个认真的校内代拿互助平台\n' +
      '不论是快递、外卖，还是考试急需的重要证件\n' +
      '只要你需要，我们为你星火相传'
})

</script>

<template>
  <div class="intro-container">
    <h1>{{ logoText.head }}</h1>
    <h2>{{ logoText.txt }}</h2>
    <img src="@/assets/logocom.png">
    <p @click="jumpHelper.jumpToHelper()">帮助</p>
  </div>
</template>

<style scoped>
  .intro-container{
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 60%;
    background-color: #ccdaff;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
  }
  .intro-container img{
    position: absolute;
    width: 54%;
    right: 12%;
    bottom: 8%;
    animation: 2s 1 imgani;
  }
  @keyframes imgani {
    0%{
      transform: translateX(20%);
      opacity: 0;
    }
  }
  .intro-container h1{
    position: absolute;
    top: 40px;
    left: 40px;
    font-size: 32px;
    color: #333;
    font-weight: bold;
    letter-spacing: 2px;
    animation: 1 2s h1ani;
  }
  @keyframes h1ani {
    0%{
      letter-spacing: 0;
      transform: translateY(-40%);
      opacity: 0;
    }
  }
  .intro-container h2{
    position: absolute;
    left: 40px;
    top: 90px;
    font-size: 18px;
    white-space: pre-line;
    z-index: 3;
    line-height: 26px;
    color: #555;
    animation: 1 2s h1ani;
  }
  .intro-container p{
    position: absolute;
    bottom: 10px;
    right: 40px;
    color: #333;
    text-decoration: underline;
    cursor: pointer;
    animation: 2s 1 imgani;
  }
</style>